<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            h6 {
                margin: 8px 0 0;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }

            h6::after {
                content: ':';
            }

            code {
                font-family: 'Roboto Mono', Monaco, courier, monospace;
                color: #e96900;
                padding: 3px 5px;
                margin: 0 2px;
                border-radius: 2px;
                white-space: nowrap;
                font-size: 0.8em;
                background-color: #f8f8f8;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>循环数组</h6>
            没有 index
            <ul>
                <li v-for="todo in todos">{{todo}}</li>
            </ul>
            含有 index
            <ul>
                <li v-for="(todo, index) in todos">index: {{index}}, {{todo}}</li>
            </ul>
            <h6>循环对象</h6>
            <ol>
                <li v-for="(value, key, index) in framework">
                    index: {{index}}, {{key}}: {{value}}
                </li>
            </ol>
            <h6>循环数字</h6>
            <span v-for="(item, index) in 10"> {{item}} </span>
            <h6>在自定义组件中使用循环</h6>
            <ol>
                <li>在组件中添加 <code>props</code></li>
                <li>在组件上添加 <code>v-bind:xx='..'</code> 绑定的 xx 就是 props 中添加的某一属性, 这样 xx 就可以使用了</li>
            </ol>
            <h6>在循环中添加 key</h6>
            <code>key</code> 的作用就相当于 angular1.x 中循环的 <code>track by</code> 的作用. 如:
            <div>
                &lt;div v-for="item in items" v-bind:key="item.id"&gt;<br>
                &nbsp;&nbsp;&lt;!-- content --&gt;<br>
                &lt;/div&gt;
            </div>
            <h6>数组改变的检测</h6>
            对数组对象使用 <code>push()</code><code>pop()</code><code>shift()</code><code>unshift()</code><code>splice()</code><code>sort()</code><code>reverse()</code> 方法 view 会自动更新,
            但是用如 <code>filter()</code><code>concat()</code><code>slice()</code> 等方法 view 不会更新(为触发数组改变), 此时可以把数组直接赋值为数组改变后的结果. <code>app.arr = newArray</code>
            <h6>注意, 一下改变不会触发数组的自检测</h6>
            <ol>
                <li><code>app.items[indexOfItem] = newValue;</code></li>
                <li><code>app.items.length = newLength;</code></li>
            </ol>
            对于注意事项1, 可以 <code>Vue.set(example1.items, indexOfItem, newValue)</code> 或使用 <code>splice()</code> 方法. <br>
            同理对于注意事项2, 也可以使用 <code>splice()</code> 方法. <code>example1.items.splice(newLength)</code>
        </div>
        <script type="text/javascript" src="loop.js"></script>
    </body>
</html>